 <template>
	<view id="order-page" @click="conClick">
		<!-- 点击反馈组件 -->
		<view class="page-header">
			<view class="task-type-nav">
				<view class="nav-bar" v-for="(item,index) in taskTypeTabTitle" :key="index"  @click="taskTypeTabClick(index)">
					<view class="name" :class="index==curTaskTypeTab?'click':''">{{item}}</view>
					<view class="under-line" v-if="index==curTaskTypeTab"></view>
					<view class="num" v-if="taskTypeNum[index] > 0">{{taskTypeNum[index]}}</view>
				</view>
			</view>
			<clickCircle ref="clickCircle"></clickCircle>
			<view class='nav' style="position: relative;">
				<navTab v-if="curTaskTypeTab === 0" ref="navTab" :tabTitle="tabTitleSale" :taskStausNum="taskStausNum" :isShowNum="true" :curIndex="curTaskTypeTab" @changeTab='changeTab'></navTab>
				<navTab v-else ref="navTab"  :tabTitle="tabTitle" :taskStausNum="taskStausNum" :isShowNum="true" :curIndex="curTaskTypeTab" @changeTab='changeTab'></navTab>

			</view>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper id="swiper" :current="tabCurIndex" duration="300" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in navList" :key="listIndex">
				<scroll-view class="scroll-content" scroll-y="true" >
					<view class="order-list" v-for="(list,index) in (
					    curTaskTypeTab == 0 ? listItem.orderSaleList
					                        : curTaskTypeTab == 1 ? listItem.orderFlowList : curTaskTypeTab == 2 ? listItem.orderAssessList : listItem.orderCustomizeList
					    )" :key="index">
						<view class="order-card">
							<view class="card-header" v-if="tabCurIndex==0 && curTaskTypeTab==0">
								<view class="card-header-l">
									<view class="header-icon" :class="shopImg[list.shop_type]"></view>
									<view class="task-code">任务编号：{{list.task_code}}</view>
									<view class="copy-btn" @click='copy(list.task_code)'>复制</view>
								</view>
							</view>
							<view class="card-header" v-else>
								<view class="card-header-h">
									<view class="header-icon" :class="shopImg[list.shop_type]"></view>
									<view class="shop-name">店铺名称：{{getShopName(list.shop_name)}}</view>
								</view>
								<view class="card-header-l">
									<view class="task-code">任务编号：{{list.task_code}}</view>
									<view class="copy-btn" @click='copy(list.task_code)'>复制</view>
								</view>
							</view>
							<view class="card-body">
								<view class="task-img-box" v-if="curTaskTypeTab ==2">
									<image class="task-img" :src="list.goods_img"></image>
								</view>
								<view class="task-img-box" v-else>
									<canvas class="task-img"  canvas-id="firstCanvas"  v-if="tabCurIndex==0"></canvas>
									<image class="task-img" :src="list.goods_img" v-else></image>
								</view>
								<view class="task-info">
									<view class="cell">佣金：<view class="task-info-content">￥{{list.commission}}</view></view>
									<view class="cell" v-if="curTaskTypeTab !=3">订单类型：<view class="task-info-content">{{getTaskType(list.plan_type)}}</view></view>
									<view class="cell" v-else>订单类型：<view class="task-info-content">自定义订单</view></view>
									<view class="cell" v-if="curTaskTypeTab ==3" style="font-weight: bold; color: #05e85c">注意：注意甄别是否需要付款</view>
									<view class="cell" v-if="curTaskTypeTab ==0">订单金额：<view class="task-info-content">￥{{list.pay_money}}</view></view>
									<view class="cell" v-if="curTaskTypeTab ==0">拍下数量：<view class="task-info-content">{{list.buy_num}}</view></view>
									<view class="cell" style="font-weight: bold; color: red">做单账号：{{list.tb_name}}</view>
								</view>
							</view>
							<view class="fail-reason">
								<view class="reason" v-if="tabCurIndex == 3">
									失败原因：{{list.remark}}
								</view>
								<!--<view class="reason" v-if="tabCurIndex == 4 && list.remark">-->
								<!--	失败原因：{{list.remark}}-->
								<!--</view>-->
							</view>
							<view v-if="tabCurIndex == 2 && list.rebate_type == 1">
								<view class="rebate-status" v-if="list.rebate_status ==2">商家已返款本金到您的银行卡：【{{list.bank_user_name}}】尾号【{{list.bank_num}}】</view>
								<view class="rebate-status" v-if="list.rebate_status ==1">商家24小时内返本金到：【{{list.bank_user_name}}】尾号【{{list.bank_num}}】</view>
							</view>
							<view class="card-footer" v-if="curTaskTypeTab == 2">
								<view class="card-footer-btn opt-btn" @click="appealOrder(list)" v-show="tabCurIndex == 0">{{appealStatus[list.appeal_status]}}</view>
								<view class="card-footer-btn opt-btn" v-if="list.status == 1 || list.status == 2" @click='optEvaluation(list.id)'>{{getAssessStatus(list.status)}}</view>
								<view class="card-footer-btn" v-else>{{getAssessStatus(list.status)}}</view>
                                <!--<view class="card-footer-btn opt-btn-exchange" v-if="list.exchange_status == 1" @click="commissionReceipt(list)">{{commissionStatus[list.commission_receipt]}}</view>-->
                                <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 2">{{ list.exchange_time }} 兑换</view>-->
                                <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 3">{{commissionStatus[list.commission_receipt]}}</view>-->
                                <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 4">{{commissionStatus[list.commission_receipt]}}</view>-->
							</view>
							<view class="card-footer" v-else>
								<view v-if="tabCurIndex === 0">
									<view class="tip-btn" v-if="list.is_onedragn == 3 && list.entrance_type == 2">抖音秒单任务</view>
									<view class="card-footer-btn opt-btn" @click='optSalesAndFlowTask(list.plan_type, list.id, list)'>待操作</view>
								</view>
								<view v-else-if="tabCurIndex === 1">
									<view class="card-footer-btn" v-if="list.bind_status ==1">待审核</view>
									<view class="card-footer-btn" v-else>商家{{ list.autocheck }}小时内审核</view>
								</view>
                                <view v-else-if="tabCurIndex === 2">
                                    <!--<view class="card-footer-btn opt-btn-exchange" v-if="list.exchange_status == 1" @click="commissionReceipt(list)">{{commissionStatus[list.commission_receipt]}}</view>-->
                                    <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 2">{{ list.exchange_time }} 兑换</view>-->
                                    <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 3">{{commissionStatus[list.commission_receipt]}}</view>-->
                                    <!--<view class="card-footer-btn" v-else-if="list.exchange_status == 4">{{commissionStatus[list.commission_receipt]}}</view>-->
                                    <view class="card-footer-btn opt-btn" @click="appealOrder(list)">{{appealStatus[list.appeal_status]}}</view>
                                    <view class="card-footer-btn">{{getListStatus(tabCurIndex)}}</view>
                                </view>
                                <view v-else-if="tabCurIndex === 4">
                                    <view class="card-footer-btn opt-btn-exchange" v-if="list.exchange_status == 1" @click="commissionReceipt(list)">{{commissionStatus[list.commission_receipt]}}</view>
                                    <view class="card-footer-btn" v-else-if="list.exchange_status == 2">{{ list.exchange_time }} 可评价</view>
                                    <view class="card-footer-btn" v-else-if="list.exchange_status == 3">{{commissionStatus[list.commission_receipt]}}</view>
                                    <view class="card-footer-btn" v-else-if="list.exchange_status == 4">{{commissionStatus[list.commission_receipt]}}</view>

                                </view>
								<view v-else>
									<!-- <view class="rebate-container" v-if="tabCurIndex == 2">
										<view class="rebate-box" v-if="list.rebate_type == 1">
											<view class="rebate-status">{{rebateStatus[list.rebate_status]}}</view>
											<view v-if="list.rebate_status ==3" class="rebate-btn" @click="showFailModal(list)">查看</view>
											<view v-if="list.rebate_status ==2" class="rebate-btn" @click="toRebateAppealPage(list)">{{list.rebate_appeal_status == 1 ? "未返款?" :"查看"}}</view>
										</view>
									</view> -->
									<!--<view class="card-footer-btn opt-btn-exchange" v-if="list.exchange_status == 1" @click="commissionReceipt(list)">{{commissionStatus[list.commission_receipt]}}</view>-->
									<!--<view class="card-footer-btn" v-else-if="list.exchange_status == 2">{{ list.exchange_time }} 兑换</view>-->
									<!--<view class="card-footer-btn" v-else-if="list.exchange_status == 3">{{commissionStatus[list.commission_receipt]}}</view>-->
									<!--<view class="card-footer-btn" v-else-if="list.exchange_status == 4">{{commissionStatus[list.commission_receipt]}}</view>-->
									<view class="card-footer-btn opt-btn" @click="appealOrder(list)">{{appealStatus[list.appeal_status]}}</view>
									<view class="card-footer-btn">{{getListStatus(tabCurIndex)}}</view>

								</view>
							</view>
						</view>

					</view>
					<view class="tips" v-if="listItem.orderSaleList.length > 0">
						为了您的数据安全，仅保留最近{{curTaskTypeTab == 2?'一个月':'7天'}}的数据
					</view>
					<!-- <view class="tips note" v-if="curTaskTypeTab !=2 && tabCurIndex == 1 && listItem.orderList.length>0">
						友情提醒：您的订单正在审核中...如果未付款，请尽快付款。如果已付款，请不要轻易退款，系统将会按照您的实际付款金额进行返款 。
					</view> -->
					<view style="text-align: center;margin-top: 39%;" v-if="listItem.orderSaleList.length===0">
						<image style="width: 150px;height: 100px;" src="../../static/img/no-data-img.png"></image>
						<view class="tips">为了您的数据安全，仅保留最近{{curTaskTypeTab == 2?'一个月':'7天'}}的数据</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-modal
			:showModal="showModal"
			title="返款失败原因"
			:content="rebateRemark"
			:showCancel = "false"
			@confirmModal="showModal = false"
			>
		</u-modal>
		<u-modal
				:showModal="isShowTipsModal"
				title="温馨提示"
				:showCancel="true"
				@cancleModal="closeValidate"
				confrimTitle="验证"
				:confirmColor="this.tb_name ? '#000' : '#ccc'"
				@confirmModal="taskconfirm(list, list.id)"
		>
			<view style="text-align: center;">
				<view>请验证填写当前绑定的账号</view>
				<view v-show="tbNameError" style="color: red;margin: 20upx 0;">*填写账号有误</view>
				<view class="tb_view">
					<view class="tb_name_label">淘宝号：</view>
					<input type="text" v-model="tb_name" @input="tbName" placeholder="请验证后输入" :focus="isTbNameFocus" class="tb_name">
				</view>
				<!--<view style="font-size: 44upx;color: red;margin: 20upx 0;">{{
                  list.tb_name
                }}</view>-->
				<view>请前往淘宝APP确认是否一致</view>
			</view>
		</u-modal>
		<u-modal
				:showModal="$store.getters.urgeDialogFlag && $store.getters.urgeDialogNum != 0"
				title="催收消息"
				:autoClose="false"
				:showCancel="false"
				confirmColor="#000"
				confrimTitle="查看消息"
				@confirmModal="toMessageDetail">
			<view id="urge-detail">
				你有<text>{{" " + $store.getters.urgeDialogNum + " "}}</text>个订单<text>{{" "}}未确认收货</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import navTab from '../../components/navTab.vue';
	import clickCircle from '../../components/clickCircle.vue';
	import uModal from '../../components/uni-modal/uni-modal.vue'
	import {
		apiPushAssessList,
		apiPushTaskList,
		apiSaleFlowTaskDetail,
		apiSalesTaskDragDetail
	} from '../../../http/apis.js'

	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			navTab,
			clickCircle,
			uModal
		},
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				orderList: [],
				isShowTipsModal: false,
				tbNameError: false,// *填写账号有误
				isTbNameFocus: false,// 重新聚焦
				tb_name: '',// 请务必填写绑定的淘宝账号
				storeName: {// 验证账号的类型
					1: "淘宝",// shop_type
					2: "天猫",
					4: "阿里巴巴"
				},
				list: {},
				tabTitle: ['待操作','待审核' ,'已完成', '失败任务', ''], //导航栏格式 --导航栏组件
				tabTitleSale: ['待操作','待审核' ,'已完成', '失败任务', '好评返现'], //导航栏格式 --导航栏组件
				taskTypeTabTitle: ['销量订单','流量订单','评价订单','自定义订单'],
				curTaskTypeTab: 0,// 一级  0,1,2
				tabCurIndex: 0, //sweiper所在页 点二级触发 0,1,2,3
				tabStatus: 1,// 二级 1，2，3，4，5
				navList: [{
					state: 1,
					text: '待操作',
                    orderSaleList: [],
                    orderFlowList: [],
                    orderAssessList: [],
                    orderCustomizeList: [],
					allNum: 0
				},{
					state: 2,
					text: '待审核',
                    orderSaleList: [],
                    orderFlowList: [],
                    orderAssessList: [],
                    orderCustomizeList: [],
					allNum: 0
				},{
					state: 3,
					text: '已完成',
                    orderSaleList: [],
                    orderFlowList: [],
                    orderAssessList: [],
                    orderCustomizeList: [],
					allNum: 0
				},{
					state: 4,
					text: '失败任务',
                    orderSaleList: [],
                    orderFlowList: [],
                    orderAssessList: [],
                    orderCustomizeList: [],
					allNum: 0
				},{
                    state: 5,
                    text: '好评返佣',
                    orderSaleList: [],
                    orderFlowList: [],
                    orderAssessList: [],
                    orderCustomizeList: [],
                    allNum: 0
                }],
				statusData: {
					0: '待操作',
					1: '待审核',
					2: '已完成',
					3: '失败任务'
				},
				assessStatus:{
					1: '待操作',
					2: '正在执行',
					3: '待审核',
					4: '审核成功',
					5: '审核失败',
					6: '商家中止',
					7: '人工终止',
					8: '超时终止'
				},
				shopImg: {
					1:'el-icon-ali-tb',
					2:'el-icon-ali-tm',
					3:'el-icon-ali-jd',
					4: 'el-icon-ali-1688_icon',
					13:'el-icon-ali-wph',
					15:'el-icon-ali-pdd'
				},
				taskTypeData:{
					1: '销量',
					2: '流量',
					3: '评价'
				},
				appealStatus: {
				  1: '申诉已提交',
				  2: '申诉正在处理',
				  3: '申诉已完成',
				  4: '申诉'
				},
                commissionStatus: {
                    1: '已评价',
                    2: '可评价',
                    3: '立返'
                },
				rebateStatus:{
					1: '商家24小时内返款',
					2: '商家已返款',
					3: '返款失败',
					4: '申诉中'
				},
				unreviewedNumber: {
					0: 0,
					1: 0,
					2: 0
				},
				showModal: false,
				rebateRemark: '',

				taskStausNum:{
					0: {
						0: 0,
						1: 0,
						2: 0,
						3: 0,
						4: 0
					},
					1: {
						0: 0,
						1: 0,
						2: 0,
						3: 0,
                        4: 0
					},
					2: {
						0: 0,
						1: 0,
						2: 0,
						3: 0,
                        4: 0
					},
                    3: {
                        0: 0,
                        1: 0,
                        2: 0,
                        3: 0,
                        4: 0
                    }
				},
				taskTypeNum:{
					0: 0,
					1: 0,
					2: 0
				}
			};
		},
		onLoad(e) {
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			// var that = this
			this.getTaskList()
			this.getFlowTaskNum()
            this.getAssessTaskList()
            this.getCustomizeList()
		},
		onPullDownRefresh(){
			// 下拉刷新
			setTimeout(()=>{
				this.getTaskList()
        this.getCustomizeList()
				uni.stopPullDownRefresh();
			},1000)
		},
		methods: {
			// 去消息列表页面
			toMessageDetail() {
				uni.switchTab({
					url: "../notice/noticeList"
				})
			},
			// 验证淘宝号
			taskconfirm(list, id) {
				// console.log(list)
				if (this.tb_name == '') return
				if (this.tb_name.trim() == list.tb_name) {
					// 关闭模态框
					this.isTbNameFocus = true
					this.isShowTipsModal = false
					this.tb_name = ""
					// list.is_onedragn == 2// 一拖N要去掉
					uni.navigateTo({// is_onedragn 1:代表1拖n 2:代表普通
						url: `./${list.is_onedragn == 1 ? 'salesTaskDrag' : 'salesTask' }?id=${id}`
					})
				} else {
					this.tbNameError = true
					this.tb_name = ""
					this.isTbNameFocus = true
				}

			},
			// 关闭淘宝验证
			closeValidate() {
				// 关闭模态框
				this.isShowTipsModal = false
				this.tbNameError = false,// *填写账号有误
						this.tb_name = ""
			},
			tbName() {
				if (this.tbNameError == true) this.tbNameError = false
			},
			getFlowTaskNum(){
				apiPushTaskList({
					token: this.token,
					page: 1,
					pageSize: 100,
					status: this.tabStatus,
					taskType: 2
				}).then(res =>{
				    if(res.data.code == 1)  {
                        this.navList[this.tabCurIndex].orderFlowList = res.data.msg.list
                        this.navList[this.tabCurIndex].allNum = res.data.msg.all_num
						this.taskStausNum[1][0] = res.data.msg.wait_num
						this.taskStausNum[1][1] = res.data.msg.check_num
						this.taskTypeNum[1] = res.data.msg.wait_num + res.data.msg.check_num
                        if(this.tabStatus == 1){
                            for(var i in this.navList[this.tabCurIndex].orderFlowList){
                                this.getNewGoodsImg(this.navList[this.tabCurIndex].orderFlowList[i].goods_img)
                            }
                        }
					}
                    console.log('流量')
                    console.log(this.navList)
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			getTaskList(){
				apiPushTaskList({
					token: this.token,
					page: 1,
					pageSize: 100,
					status: this.tabStatus,
                    taskType: 1,
                    customize_whether:1
                }).then(res =>{
				    if(res.data.code == 1)  {
						uni.hideLoading()
						this.navList[this.tabCurIndex].orderSaleList = res.data.msg.list
						this.navList[this.tabCurIndex].allNum = res.data.msg.all_num
						// if(this.curTaskTypeTab == 0){
							this.taskStausNum[0][0] = res.data.msg.wait_num
							this.taskStausNum[0][1] = res.data.msg.check_num
							this.taskStausNum[0][4] = res.data.msg.exchange_num
							this.taskTypeNum[0] = res.data.msg.wait_num + res.data.msg.check_num
						// }
						if(this.tabStatus == 1){
							for(var i in this.navList[this.tabCurIndex].orderSaleList){
								this.getNewGoodsImg(this.navList[this.tabCurIndex].orderSaleList[i].goods_img)
							}
						}
					}
                    console.log('销量')
                    console.log(this.navList)
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
				})

			},
			getAssessTaskList(){
				apiPushAssessList({
					token: this.token,
					page: 1,
					pageSize: 100,
					status: this.tabStatus
				}).then(res =>{
				    if(res.data.code == 1)  {
						uni.hideLoading()
						this.navList[this.tabCurIndex].orderAssessList = res.data.msg.list
						this.navList[this.tabCurIndex].allNum = res.data.msg.all_num
						this.taskStausNum[2][0] = res.data.msg.wait_num
						this.taskStausNum[2][1] = res.data.msg.check_num
						this.taskTypeNum[2] = res.data.msg.wait_num + res.data.msg.check_num
					}
                    console.log('评价')
                    console.log(this.navList)
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
				})
			},
            getCustomizeList(){
                apiPushTaskList({
                  token: this.token,
                  page: 1,
                  pageSize: 100,
                  status: this.tabStatus,
                  taskType: 1,
                  customize_whether:2
                }).then(res =>{
                  if(res.data.code == 1)  {
                    uni.hideLoading()
                    this.navList[this.tabCurIndex].orderCustomizeList = res.data.msg.list
                    this.navList[this.tabCurIndex].allNum = res.data.msg.all_num
                    this.taskStausNum[3][0] = res.data.msg.wait_num
                    this.taskStausNum[3][1] = res.data.msg.check_num
                    this.taskTypeNum[3] = res.data.msg.wait_num + res.data.msg.check_num
                    if(this.tabStatus == 1){
                      for(var i in this.navList[this.tabCurIndex].orderCustomizeList){
                        this.getNewGoodsImg(this.navList[this.tabCurIndex].orderCustomizeList[i].goods_img)
                      }
                    }
                      console.log('自定义')
                      console.log(this.navList)
                  }
                }).catch(res => {
                  uni.hideLoading()
                  this.$msg.showToast(res.data.msg)
                })

              },
			taskTypeTabClick(index) {
				this.curTaskTypeTab = index //设置导航点击了哪一个
				if(this.curTaskTypeTab == 1){
                    this.getFlowTaskNum()
                    // this.getTaskList()
                } else if(this.curTaskTypeTab == 2){
                    this.getAssessTaskList()
                }else if(this.curTaskTypeTab == 3) {
                    this.getCustomizeList()
                } else {
                    this.getTaskList()
                }
			},
			getNewGoodsImg(img) {
				console.log(img)
				uni.getImageInfo({
					src: img,
					success: function(res) {
						//绘制背景图
						uni.getImageInfo({
							src: '../../static/img/msk_img.png',
							success: function(msk) {
								//绘制背景图
								let ctx = uni.createCanvasContext('firstCanvas');
								ctx.drawImage(res.path, 0, 0, 110, 110);
								ctx.drawImage(msk.path, 35, 35, 50, 50);
								ctx.draw();
							}
						});
					}
				});
			},
			getShopImg(type){
				//1：淘宝，2：天猫，3：京东，13：唯品会，15:拼多多
				return this.shopImg[type]
			},
			getListStatus(type) {
				return this.statusData[type]
			},
			getAssessStatus(type){
				return this.assessStatus[type]
			},
			getTaskType(type){
				return this.taskTypeData[type]
			},
			getShopName(name){
				var nameText = ''
				for(var i in name){
					if((parseInt(i) + 1) % 2 == 0){
						nameText += '*'
					} else {
						nameText += name[i]
					}

				}
				return nameText
			},
			changeTab(index) {
				this.tabCurIndex = index
			},
			// 点击反馈事件
			conClick(e) {
				this.$refs.clickCircle.conClick(e);
			},
			swiperTab(e){
				this.tabCurIndex = e.target.current;
				this.$refs.navTab.navClick(this.tabCurIndex)
				this.tabStatus = this.tabCurIndex + 1
                if(this.curTaskTypeTab == 1){
                    this.getFlowTaskNum()
                    // this.getTaskList()
                } else if(this.curTaskTypeTab == 2){
                    this.getAssessTaskList()
                }else if(this.curTaskTypeTab == 3) {
                    this.getCustomizeList()
                } else {
                    this.getTaskList()
                }
			},
			optSalesAndFlowTask(plantype, id, list){
				if(plantype == 1){
				  if(list.shop_type == 20 && list.customize_whether == 1) {
                    uni.navigateTo({
                      url: `./salesTaskTik?id=${id}`,
                    });
                     return
                  }
					apiSaleFlowTaskDetail({
						token: this.token,
						pushTaskId: id,
					}).then((res) => {
						if (res.data.code == 1) {
							this.list = res.data.msg;
							this.list.is_onedragn = list.is_onedragn
							if (!this.storeName[this.list.shop_type]) {
                                // 不存在则跳过验证模态框
                                uni.navigateTo({
                                  url: `./salesTask?id=${id}&status=${list.customize_whether}`,
                                });
							} else {
								// 显示验证模态框
								this.isShowTipsModal = true
							}
						}
					}).catch((res) => {
						this.$msg.showToast(res.data.msg);
					})
					// uni.navigateTo({
					// 	url: './salesTask?id=' + id
					// })
				} else {
					uni.navigateTo({
						url: './flowTask?id=' + id
					})
				}
			},
			optEvaluation(id){
				uni.navigateTo({
					url: './evaluationTask?id=' + id
				})
			},
			toRebateAppealPage(list){
				uni.navigateTo({
					url: './rebateAppealTask?id=' + list.merchant_rebate_id + '&status=' + list.rebate_appeal_status
				})
			},
			appealOrder(item){
				let url = './appealTask?taskCode=' + item.task_code + '&type=' + item.plan_type + '&status=' + item.appeal_status + '&tbName=' + item.tb_name + '&orderNum=' + item.order_num + '&tabType=' + this.currentTab
				if (item.plan_type == 3) {
					url += `&merchant_id=${item.merchant_id}`
				}
				uni.navigateTo({url})
			},
            commissionReceipt(item){
                let url = './commissionReceipt?taskCode=' + item.task_code + `&merchant_id=${item.merchant_id}` + '&commission_receipt=' + item.commission_receipt  + '&orderNum=' + item.order_num + '&tabType=' + this.currentTab
                uni.navigateTo({url})
            },
			copy (id) {
				uni.setClipboardData({
					data: id,
					success: (data)=> {
						this.$msg.showToast('复制成功')
					},
					fail: function(err) {},
					complete: function(res) {}
				})
			},
			// swiper 滑动
			// swiperTab: function(e) {
			// 	var that = this
			// 	var index = e.detail.current //获取索引
			// 	if (this.tabTitle.length <= 3) {
			// 		this.$refs.navTab.navClick(index)
			// 	} else {
			// 		this.$refs.navTab.longClick(index)
			// 	}

			// },

		},
		mounted() {
			// this.planList();
		}
	};
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		overflow-y: hidden;
	}
	#order-page {
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		.page-header {
			position: fixed;
			left: 0;
			top: var(--window-top);
			color: white;
			width: 100%;
			z-index: 1000;
		}
		.task-type-nav {
			padding: 32upx 0 0 32upx;
			border-bottom: 1px solid #EBEBEB;
			background: #FFFFFF;
			.nav-bar {
				display: inline-block;
				margin-right: 48upx;
				position: relative;
				.name {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 26upx;
					&.click{
						font-size: 30upx;
						color: #FF8C00;
						line-height: 30upx;
					}
				}
				.under-line {
					width: 40%;
					height: 2px;
					background-color: #FF8C00;
					margin: 24upx auto 0 auto;

				}
				.num {
					background: $theme-color;
					color: #FFFFFF;
					display: inline-block;
					font-size: 24upx;
					width: 30upx;
					height: 30upx;
					text-align: center;
					line-height: 30upx;
					border-radius: 50%;
					position: absolute;
					right: -30upx;
					top: -20upx;
				}
			}

		}
		.no-check-num {
			background: $theme-color;
			color: #FFFFFF;
			display: inline-block;
			font-size: 24upx;
			width: 30upx;
			height: 30upx;
			text-align: center;
			line-height: 30upx;
			border-radius: 50%;
			// position: absolute;
			// left: 43%;
			// top: 7px;
		}
		.no-check-num-1 {
			background: $theme-color;
			color: #FFFFFF;
			display: inline-block;
			font-size: 24upx;
			width: 30upx;
			height: 30upx;
			text-align: center;
			line-height: 30upx;
			border-radius: 50%;
			position: absolute;
			left: 19%;
			top: 7px;
		}
		#swiper{
			min-height: 100vh;
			padding-top: 200upx;
		}
		.scroll-content {
			height: 100%;
			.tips,.note{
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 34upx;
				text-align: center;
				margin-top: 28upx;
			}
			.note {
				color: $theme-color;
			}
			.order-list {
				.order-card {
					padding: 36upx;
					background: #FFFFFF;
					margin-top: 24upx;
					.card-header {
						.card-header-h {
							.header-icon {
								display: inline-block;
								font-size: 40upx;
								vertical-align: bottom;
								margin-right: 18upx;
								&.el-icon-ali-tb {
								  color: rgb(253, 77, 15);
								}
								&.el-icon-ali-jd {
								  color: rgb(241, 48, 24);
								}
								&.el-icon-ali-pdd {
								  color: rgb(240, 16, 15);
								}
								&.el-icon-ali-tm {
								  color: rgb(253, 17, 39);
								}
								&.el-icon-ali-wph {
								  color: rgb(219, 16, 113);
								}
								&.el-icon-ali-1688_icon {
								  color: rgb(255, 103, 4);
								}
							}
							.shop-name {
								display: inline-block;
								font-size: 30upx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 40upx;
							}
						}
						.card-header-l {
							display: flex;
							align-items: center;
							.header-icon {
								display: inline-block;
								color: red;
								font-size: 40upx;
								vertical-align: bottom;
								margin-right: 18upx;
							}
							.task-code {
								font-size: 24upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 34upx;
								display: inline-block;
							}
							.copy-btn {
								font-size: 22upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								background: $theme-color;
								color: #FFFFFF;
								line-height: 32upx;
								border-radius: 18upx;
								display: inline-block;
								padding: 4upx 18upx;
								margin-left: 24upx;
							}
						}
					}
					.card-body {
						.task-img-box {
							display: inline-block;
							margin-top: 48upx;
							.task-img {
								width: 220upx;
								height: 220upx;
							}
						}
						.task-info {
							font-size: 28upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 26upx;
							display: inline-block;
							margin-left: 32upx;
							vertical-align: top;
							margin-top: 52upx;
							.cell:nth-child(1),.cell:nth-child(2),.cell:nth-child(3),.cell:nth-child(4){
								margin-bottom: 22upx;
							}
							.task-info-content {
								color: #333333;
								display: inline-block;

							}

						}
					}
					.fail-reason {
						padding: 20upx 0;
						color: red;
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight:400;
					}
					.rebate-status {
						line-height: 28px;
						font-size: 26upx;
						color: #ff0f0099;
						margin-right: 10upx;
					}
					.card-footer {
						text-align: right;
						margin-top: 12upx;
						.card-footer-btn, .opt-btn {
							display: inline-block;
							border-radius: 30upx;
							border: 1px solid #999999;
							font-size: 26upx;
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 500;
							color: #333333;
							line-height: 36upx;
							padding: 10upx 34upx;
							margin-left: 24upx;
						}
                        .card-footer-btn, .opt-btn-exchange {
                            display: inline-block;
                            border-radius: 30upx;
                            border: 1px solid #999999;
                            font-size: 26upx;
                            font-family: PingFang-SC-Medium, PingFang-SC;
                            font-weight: 500;
                            color: #333333;
                            line-height: 36upx;
                            padding: 10upx 34upx;
                            margin-left: 24upx;
                        }
                        .tip-btn {
                            display: inline-block;
                            border-radius: 30upx;
                            border: 1px solid #40b695;
                            font-size: 26upx;
                            font-weight: 500;
                            line-height: 36upx;
                            padding: 10upx 34upx;
                            background: #fa436a;
                            color: #FFFFFF;
                        }
						.opt-btn {
							background: $theme-background-color;
							color: #FFFFFF;
							border: 1px solid $theme-color;
						}
                        .opt-btn-exchange {
                            background: #fa436a;
                            color: #FFFFFF;
                            border: 1px solid #fa436a;
                        }
						.rebate-container {
							display: inline-block;
							vertical-align: text-top;
							.rebate-box {
								display: flex;
								.rebate-status {
									line-height: 28px;
									font-size: 26upx;
									color: #ff0f0099;
									margin-right: 10upx;
								}
								.rebate-btn {
									display: inline-block;
									border-radius: 30upx;
									border: 1px solid #ff0f0099;
									font-size: 26upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: #333333;
									line-height: 50upx;
									height: 50upx;
									padding: 2upx 34upx;
									background: #ff0f0099;
									color: #FFFFFF;
								}
							}
						}
					}
				}
			}
		}

	}
	.tb_view {
		font-size: 44upx;
		color: red;
		margin: 20upx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.tb_name_label {
			flex: 1;
			font-size: 30upx;
		}
		.tb_name {
			flex: 2;
			height: 60upx;
			margin: 0 auto;

			font-size: 30upx;
			padding: 10upx;
			text-align: left;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 8upx;
		}
	}

	#urge-detail {
		height: 150upx;
		line-height: 150upx;
		text-align: center;
		font-size: 36upx;
		text {
			color: red;
		}
	}


</style>


